<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
type EChartsOption = echarts.EChartsOption;

onMounted(() => {
    drawDay();
    drawDevice();
})

//唯一ID、上报时刻、电压、电流、功率、功率因数、累计总用电量、温度
let dataArr = [
    {
        id: 23145215,
        time: new Date(),
        voltage: 220,
        electricity: 10,
        power: 100,
        powerFactor: 0.98,
        acc_ele_com: 350,
        temperature: 50,
    },
    {
        id: 23145215,
        time: new Date(),
        voltage: 220,
        electricity: 10,
        power: 100,
        powerFactor: 0.98,
        acc_ele_com: 350,
        temperature: 50,
    },
    {
        id: 23145215,
        time: new Date(),
        voltage: 220,
        electricity: 10,
        power: 100,
        powerFactor: 0.98,
        acc_ele_com: 350,
        temperature: 50,
    },
    {
        id: 23145215,
        time: new Date(),
        voltage: 220,
        electricity: 10,
        power: 100,
        powerFactor: 0.98,
        acc_ele_com: 350,
        temperature: 50,
    },
    {
        id: 23145215,
        time: new Date(),
        voltage: 220,
        electricity: 10,
        power: 100,
        powerFactor: 0.98,
        acc_ele_com: 350,
        temperature: 50,
    },
]


function drawDay() {
    var chartDom = document.getElementById('dayChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        title: {
            show: true,//false
            text: "该设备近期数值",//主标题文本
            left: 'center',
            textStyle: {
                color: '#ccc',//'red'，字体颜色
                fontStyle: 'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
                fontWeight: 'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
                fontFamily: 'sans-serif',//'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New' 
                // 'Microsoft YaHei'(微软雅黑) ，文字字体
                fontSize: 18,//字体大小
                lineHeight: 36,//字体行高
            },
        },
        series: [
            {
                data: [220, 219, 221, 225, 223, 228, 227],
                type: 'line'
            }
        ]
    };

    option && myChart.setOption(option);
}

function drawDevice() {
    var chartDom = document.getElementById('deviceChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        title: {
            show: true,//false
            text: "近7日设备异常次数",//主标题文本
            left: 'center',
            textStyle: {
                color: '#ccc',//'red'，字体颜色
                fontStyle: 'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
                fontWeight: 'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
                fontFamily: 'sans-serif',//'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New' 
                // 'Microsoft YaHei'(微软雅黑) ，文字字体
                fontSize: 18,//字体大小
                lineHeight: 36,//字体行高
            },
        },
        series: [
            {
                data: [0, 0, 4, 0, 5, 0, 7],
                type: 'line'
            }
        ]
    };

    option && myChart.setOption(option);
}
</script>

<template>
    <div class="userWarnInfo">
        <div class="user">
            <img src="../assets/images/user.png" alt="">
            用户ID：23145215
        </div>
        <div class="device">
            <img src="../assets/images/deviceStatus.png" alt="">
            异常设备：办公室插座
        </div>
        <div class="type">
            <img src="../assets/images/type.png" alt="">
            异常类型：电压过高
        </div>
        <button>发送警报</button>
        <div class="detail">
            详情
            <img src="../assets/images/down.png" alt="">
        </div>
    </div>
    <div class="deviceInfo">
        <div class="deviceChart">
            <div id="dayChart"></div>
            <div id="deviceChart"></div>
        </div>
        <div class="thresholdValue">
            <div class="voltage">
                <p>高压阈值：225V</p>
                <p>低压阈值：218V</p>
                <p>当前电压：220V</p>
            </div>
            <div class="voltage">
                <p>高电流阈值：10A</p>
                <p>低电流阈值：100mA</p>
                <p>当前电流：1A</p>
            </div>
            <div class="temperature">
                <p>高温阈值：90℃</p>
                <p>低温阈值：10℃</p>
                <p>当前温度：40℃</p>
            </div>
            <div class="ele-consumption">
                <p>每日用电量阈值：3kw</p>
                <p>今日用电量：2kw</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.userWarnInfo {
    display: flex;
    width: 98%;
    height: 60px;
    margin: 15px auto 0;
    /* border: 1px solid #f89898; */
    border-radius: 10px;
    line-height: 60px;
    font-size: 20px;
}

.userWarnInfo div {
    margin-left: 30px;
}

.userWarnInfo div img {
    width: 24px;
    vertical-align: text-bottom;
}

.userWarnInfo button {
    margin-left: 400px;
    width: 100px;
    height: 36px;
    margin-top: 12px;
    background-color: #fef0f0;
    border: 1px solid #f89898;
    border-radius: 6px;
    color: #f78383;
}

.detail {
    font-size: 16px;
}

.deviceInfo {
    width: 98%;
    height: 450px;
    margin: 5px auto;
}

.deviceChart {
    display: flex;
}

#dayChart,
#deviceChart {
    width: 50%;
    height: 300px;
    border: 1px solid #fff;
}

.thresholdValue {
    display: flex;
    border: 1px solid #fff;
    width: 100%;
    height: 100px;
}

.thresholdValue div {
    text-align: center;
    width: 25%;
    font-size: 18px;
}
</style>